<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>

    <!-- <script src="js/JQuery/jquery.js"></script> -->


    <!-- 背景 -->
    <style>
        #backgrounddemo {
            background-image: url(beyond.jpg) right botton no-repeat;
            padding: 20px;
        }
    </style>

    <!-- 文本 -->
    <style>
        h1 {
            text-shadow: 5px 5px 5px rgb(9, 45, 248);
        }
    </style>
    <!-- 字体 -->
    <style>
        #fontdemo {
            font-size: 2.5em;
            font-family: "Times New Roman";
            font-style: normal;
            font-weight: bold;
        }
    </style>
    <!-- 表格 -->
    <style>
        table,
        th,
        td {
            border: 1px solid black;
        }
    </style>
    <!-- 列表 -->
    <style>
        ul.a {
            list-style-type: circle;
        }
        
        ul.b {
            list-style-type: square;
        }
        
        ol.c {
            list-style-type: upper-roman;
        }
        
        ol.d {
            list-style-type: lower-alpha;
        }
    </style>
    <!-- 边距 -->
    <style>

    </style>
    <!-- 盒子模型 -->
    <style>

    </style>



    <!-- 元素选择器 -->
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                $("p").hide();
            });
        });
    </script>

    <!-- id选择器 -->
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                $("#a").hide();
            });
        });
    </script>
    <!-- .class选择器 -->
    <script>
        $(document).ready(function() {
            $("#xuanzeqi").click(function() {
                $("#a").hide();
            });
        });
    </script>


    <script>
        //$(function())
        $(document).ready(function() {
            $("#=yincang").hover(function() {
                $(p).hide();
            });
        });
    </script>
</head>

<body>
    <p>这是一段话</p>
    <p id="a">这是第二句话</p>
    <p class="b">这是第二句话</p>
    <button>元素选择器</button></br>
    <button>id选择器</button></br>
    <button id="xuanzeqi">.class选择器</button>


    <p>这是要隐藏或显示的话</p>

    <p #yincang>隐藏</p>
    <p>显示</p>

    <button></button>
</body>

</html>

<!-- 3自定义列表
自定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。
<dl>
    <dt>关注我们</dt>
    <dd>微博</dd>
    <dd>微信</dd>
    <dd>联系我们</dd>

</dl> -->

<!-- <h1>夜的第七章</h1>
<p>1983年小巷 12月晴朗</p>
<p>夜的第七章</p>
<p>打字机继续推向</p>
<p>接近事实的那下一行</p> -->